<template>
  <div class="block-box">
    <div class="corner-lb"></div>
    <div class="corner-rb"></div>
    <h3 class="lefttask-title">
      机型占比<img class="icon" :src="getImageUrl('leftbg10.png')" alt="" />
    </h3>

    <EchartsUI ref="chartRef" style="height: 21vh" class="pie" />
  </div>
</template>
<script lang="ts" setup>
import type { EchartsUIType } from "@vben/plugins/echarts";
import { onMounted, ref, toRef } from "vue";
import { EchartsUI, useEcharts } from "@vben/plugins/echarts";
const props = defineProps({ modelType: Array });
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href;
};
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const data = toRef(props.modelType);
// console.log(data.value)
// const data = ref([{ modelName: "DJI Mavic 3 Pro", value: 276, proportion: "17.58%" },
// { modelName: "DJI Avata", value: 58, proportion: "20.13%" },
// { modelName: "DJI Iinspire", value: 581, proportion: "37.01%" },
// { modelName: "其他", value: 397, proportion: "25.27%" }])
onMounted(() => {
  renderEcharts({
    grid: {
      top: "5%",
      left: "1%",
      right: "1%",
      bottom: "5%",
    },
    series: [
      {
        animationEasing: "exponentialInOut",
        animationType: "scale",
        center: ["25%", "50%"],
        color: ["#19A8EF", "#7C5BEE", "#24E5F1", "#EEBF1B"],
        data: data.value.map(item => ({
          name: item.modelName || '-',
          value: item.count
        })),
        label: {
          show: false,
        },
        radius: ["50%", "70%"],
        type: "pie",
        itemStyle: {
          borderWidth: 3,
          borderColor: "#021314",
        },
      },
    ],
    legend: {
      orient: "vertical",
      right: "6%",
      top: "10%",
      padding: [20, 10],
      icon: "roundRect",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: "#fff",
        fontSize: 12,
        rich: {
          name: {
            fontSize: 12,
            color: "#fff",
            width: 50,
          },
          value: {
            fontSize: 12,
            color: "#fff",
            align: "right",
            width: 60,
          },
        },
      },
      formatter: function (name) {
        const item = data.value.find((d) => d.modelName === name);
        if (item) {
          return `{name|${name}}{value|${item.count}}`;
        }
        return name;
      },
    },

    tooltip: {
      trigger: "item",
      formatter: function (params) {
        return (
          "名称：" + params.name + "<br/>数量：" + params.value
        );
      },
    },
  });
});
</script>

<style lang="scss" scoped>
.block-box {
  background: rgb(2 19 20 / 52%);
  border: 1px solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  height: 25vh;
  margin-top: 0.5vh;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .lefttask-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, "PingFang SC";
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }
}

// .pie {
//   background: url("/static/big/pieBg.png") 2.3vw 1.1vh no-repeat;
//   background-size: 10vw auto;
// }

// /* 1440px屏幕适配 */
// @media screen and (max-width: 1500px) {
//   .pie {
//     background: url("/static/big/pieBg.png") 2.4vw 1.3vh no-repeat;
//     background-size: 10vw auto;
//   }
// }

// /* 1920px屏幕适配 */
// @media screen and (min-width: 1920px) {
//   .pie {
//     background: url("/static/big/pieBg.png") 2.4vw 0.5vh no-repeat;
//     background-size: 10vw auto;
//   }
// }</style>
